<template>
	<view class="d-flex a-center m-bot60">
		<view class="date">
			<text class="size32 bold">{{ currentYear }}年</text>
			<text class="size32 bold">{{ currentMonth < 10 ? `0${currentMonth}` : currentMonth }}月</text>
		</view>
		<view class="btn flexac m-right60" @click="handleChange(-1)">
			<text class="iconfont icon-arrow_left"></text>
		</view>
		<view class="btn flexac" @click="handleChange(1)">
			<text class="iconfont icon-arrow_right" :class="{'color-ccc': disabled}"></text>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted, defineEmits } from 'vue'
	
	const year = ref(new Date().getFullYear())
	const month = ref(new Date().getMonth() + 1)
	const currentYear = ref('')
	const currentMonth = ref('')
	
	const disabled = computed(() => {
		return currentYear.value == year.value && currentMonth.value == month.value
	})
	
	onMounted(() => {
		currentYear.value = year.value
		currentMonth.value = month.value
	})
	
	const emit = defineEmits(['getDate'])
	const handleChange = (direction) => {
		if(direction == 1 && disabled.value) return
		let date = new Date(currentYear.value, currentMonth.value - 1)
		// 设置月份(0 ~ 11)
		date.setMonth(date.getMonth() + direction)
		currentYear.value = date.getFullYear()
		currentMonth.value = date.getMonth() + 1
		emit('getDate', {
			year: currentYear.value,
			month: currentMonth.value
		})
	}
</script>

<style lang="scss" scoped>
	.date {
		min-width: 200rpx;
	}
	.btn {
		width: 44rpx;
		height: 44rpx;
		background: #f2f7f8;
		border-radius: 10rpx;
	}
</style>
